<template>
  <div>
    <!-- Static sidebar -->
    <div class="fixed inset-y-0 z-50 flex w-60 flex-col">
      <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pt-4">
        <!-- Navigation -->
        <nav class="flex flex-1 flex-col">
          <ul role="list" class="flex flex-1 flex-col gap-y-7">
            <!-- Main Navigation Items -->
            <li>
              <ul role="list" class="-mx-2 space-y-1">
                <li v-for="item in navigation" :key="item.name">
                  <router-link 
                    :to="item.href" 
                    class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600">
                    <component :is="item.icon" class="h-6 w-6" aria-hidden="true" />
                    <span>{{ item.name }}</span>
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>

    <!-- Main Content -->
    <main class="pl-60">
      <div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script setup>
import { HomeIcon, EyeIcon, BellIcon } from '@heroicons/vue/24/outline'
import Overview from './components/Overview.vue'

const navigation = [
  { name: '概览', href: '/overview', icon: HomeIcon },
  { name: '容器', href: '/containers', icon: EyeIcon },
  { name: '网络', href: '/network', icon: BellIcon },
  { name: '设置', href: '/settings', icon: BellIcon }
]
</script>